<template>
  <div class="portlet-manage-page">
    <div class="content">
      <div class="head">
        <div>
          <span class="search-item">标识:</span>
          <a-input v-model:value="searchFun.searchInfo.name" class="search-item" style="width: 120px"></a-input>
        </div>
        <div>
          <span class="search-item">名称:</span>
          <a-input v-model:value="searchFun.searchInfo.label" class="search-item" style="width: 120px"></a-input>
        </div>
        <div>
          <span class="search-item">分类:</span>
          <a-select
            ref="select"
            v-model:value="searchFun.searchInfo.categoryId"
            class="search-item"
            style="width: 120px"
            @change="searchFun.handleChangeCategory"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option v-for="item in searchFun.categoryId" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </div>
        <div>
          <span class="search-item">类型:</span>
          <a-select
            ref="select"
            v-model:value="searchFun.searchInfo.type"
            class="search-item"
            style="width: 120px"
            @change="searchFun.handleChange"
          >
            <a-select-option value="">全部</a-select-option>
            <a-select-option v-for="item in searchFun.type" :key="item.value" :value="item.value">
              {{ item.label }}
            </a-select-option>
          </a-select>
        </div>
        <a-button type="primary" @click="searchFun.searchClick">
          <search-outlined />
          查询
        </a-button>
        <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
      </div>
      <div :class="{ middle: 1, 'middle-iAmComponent': iAmComponent }">
        <div :class="{ 'home-portletManage': 1, iAmComponent: iAmComponent }">
          <!--布局模板, 缩放 300*200-->
          <div v-for="(item, index) in portComList" :key="item.id" @click="iAmComponent_click(item, index)">
            <div
              :class="{ selected: iAmComponent && index === iAmComponentIdx, suofangblock: 1 }"
              @mouseenter="mouseenter"
              @mouseleave="mouseleave"
            >
              <img style="width: 100%; height: 100%" :src="item.url" alt="" />
              <div style="position: absolute; right: 10px; bottom: 10px; display: none">
                <a-button type="primary" danger @click="cli_delete(item)">删除</a-button>
                <a-button style="margin: 0 10px" @click="cli_edit(item)">编辑</a-button>
                <a-button @click="cli_detail(item)">详情</a-button>
              </div>
            </div>
            <div>
              <div>
                <span style="font-weight: bolder">{{ '名称: ' }}</span>
                {{ item.label }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <a-pagination
          v-model:current="pagFun.pagInfo.pageNo"
          show-quick-jumper
          :total="pagFun.pagInfo.total"
          :responsive="false"
          @change="pagFun.onChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, defineProps, toRefs, defineEmits } from 'vue'
import factory from './factory'

// 组件在页面设计中复用
const props = defineProps({ iAmComponent: { type: Boolean, default: false } })
const { iAmComponent } = toRefs(props)
const emit = defineEmits(['i-am-component-click'])
const iAmComponentIdx = ref(null)
const iAmComponent_click = (item, index) => {
  iAmComponentIdx.value = index
  emit('i-am-component-click', item)
}
const portComList = ref([])
/**==分页功能==========**/
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    getList()
  },
})
if (!portComList.value.length) {
  getList()
}

//==获取缩略图=======================
function getList(post = pagFun.pagInfo) {
  portComList.value = []
  factory.searchLayoutList(post).then((res) => {
    res.data.dataList.forEach((item, n) => {
      portComList.value.push(item)
    })
    pagFun.pagInfo.total = Number(res.data.totalCount)
  })
}

/***查询功能************************/
const searchFun = reactive({
  searchInfo: { name: '', label: '', categoryId: '', type: '' },
  searchClick: () => {
    pagFun.pagInfo.pageNo = 1
    let pagInfo = pagFun.pagInfo
    let post = { pageNo: pagInfo.pageNo, pageSize: pagInfo.pageSize, ...searchFun.searchInfo }
    getList(post)
  },
  reset: () => {
    searchFun.searchInfo = { name: '', label: '', categoryId: '', type: '' }
  },
  open: () => {
    searchFun.openStat = !searchFun.openStat
  },
  //类型
  type: [
    { value: 'BUTTON', label: '按钮' },
    { value: 'PORTAL', label: '页面' },
    { value: 'ROUTER_VIEW', label: '路由' },
  ],
  handleChange: (value) => {
    searchFun.searchInfo.type = value
  },
  getCategoryList: () => {
    factory.getCategoryList().then((res) => {
      searchFun.categoryId = res.data.dataList
    })
  },
  //分类
  categoryId: [],
  handleChangeCategory: (value) => {
    searchFun.searchInfo.categoryId = value
  },
})
searchFun.getCategoryList()
</script>

<style lang="less" scoped>
.home-portletManage {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 57px);
  overflow: auto;
  user-select: none;

  .suofangblock {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 10px;
    overflow: hidden;
    border: 1px solid black;
  }

  .selected {
    border: 3px solid blue;
  }
}

.iAmComponent {
  height: calc(100% - 15px);
}

.portlet-manage-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #f5f8f9;

  .content {
    height: calc(100% - 0px);
    padding: 15px;
    background-color: white;

    .head {
      display: flex;
      align-items: center;
      font-size: 14px;
      line-height: 32px;

      .search-item {
        margin-right: 15px;
      }
    }

    .middle {
      height: calc(100% - 88px);
      margin: 15px 0;
    }

    .middle-iAmComponent {
      height: calc(100% - 115px);
    }

    .foot {
      display: flex;
      justify-content: right;
    }
  }
}
</style>

<style lang="less">
.portlet-manage-page {
  .permission-page-table {
    .ant-tabs {
      padding: 0 !important;
    }

    .ant-btn-link {
      padding: 0 5px !important;
    }
  }
}
</style>
